<template>
  <transition  name="slide">
  <div class="app-glass-data">
    <mt-header title="门店数据">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <section class="app-main">
      <ul class="module-info">
        <li class="item">
          <span class="item-addon">用户名：</span>庄港发
        </li>
        <li class="item">
          <span class="item-addon">所属门店：</span>大粤汽车玻璃总店
        </li>
        <li class="item">
          <span class="item-addon">最近订单日期：</span>2018-05-09
        </li>
      </ul>
      <mt-cell class="staff-details" title="员工销售明细" is-link to="/staff-details"></mt-cell>
      <table class="data-list row">
        <tr>
          <td class="item col-xs-6">
            <span class="item-title">累计销售量</span>
            <div class="item-body">
              <span class="item-count">859</span>
              <div class="item-add">
                <span class="add-count">+3</span>
                <span class="add-tips">昨日新增</span>
              </div>
            </div>
          </td>
          <td class="item col-xs-6">
            <span class="item-title">累计有效粉丝数</span>
            <div class="item-body">
              <span class="item-count">34</span>
              <div class="item-add">
                <span class="add-count">+3</span>
                <span class="add-tips">昨日新增</span>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="item col-xs-6">
            <span class="item-title">累计破损单数</span>
            <div class="item-body">
              <span class="item-count">20</span>
              <div class="item-add">
                <span class="add-count">+3</span>
                <span class="add-tips">昨日新增</span>
              </div>
            </div>
          </td>
          <td class="item col-xs-6">
            <span class="item-title">破损率</span>
            <div class="item-body">
              <span class="item-count">2%</span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="item col-xs-6">
            <span class="item-title">分销奖励</span>
            <div class="item-body">
              <span class="item-count">9.9元</span>
            </div>
          </td>
          <td class="item col-xs-6">
            <span class="item-title">预估当前销售奖励</span>
            <div class="item-body">
              <span class="item-count">400元</span>
            </div>
          </td>
        </tr>
      </table>
      <mt-cell class="staff-details" title="保险公司市场政策表" is-link to="/index"></mt-cell>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Header,Cell } from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
    }
  },
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#f6f6f6')
  },
  beforeDestroy () {
    document.querySelector('body').setAttribute('style', '')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-glass-data .module-info {
    background: #fff;
    margin: 0 0 12px;
    padding: 12px 16px;
    font-size:15px; }
  .app-glass-data .module-info .item {
    padding: 0 0 4px; }
  .app-glass-data .module-info .item-addon {
    color: #888; }
  .app-glass-data .data-list {
    background: #fff;
    width: 100%;
    margin: 0 0 12px;
    padding:0;
  border-collapse: collapse}
  .app-glass-data .data-list .item {
    padding:24px 6px 13px;
    font-size:28px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc; }
  .app-glass-data .data-list .item:nth-of-type(2n) {
    border-right: none; }
  .app-glass-data .data-list .item-title {
    display: block;
    font-size:16px; }
  .app-glass-data .data-list .item-count {
    display: inline-block;
    vertical-align: middle;
    font-size:25px;
    color: #333;
    font-weight: bold;
    margin-right:5px;
    line-height:55px; }
  .app-glass-data .data-list .item-add {
    display: inline-block;
    vertical-align: middle; }
  .app-glass-data .data-list .add-count {
    display: block;
    font-size:16px;
    color: #ef3b3c;
    font-weight: bold;
    letter-spacing: 0px; }
  .app-glass-data .data-list .add-tips {
    font-size:16px;
    color: #aaa; }
  .app-glass-data .staff-details {
    background: #fff;
    border-bottom: 1px solid #eee;  }
  .app-glass-data .action-baoxian {
    background: #fff;
    display: block;
    padding:12px;
    font-size:15px;
    color: #666;
    line-height:21px; }
  .app-glass-data .action-baoxian .ic-go {
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width:9px;
    height:21px; }
</style>
